<!doctype html>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="no-referrer" />
  <title>CSS Houdini 实现自定义瀑布流布局 by 一丝</title>
  <link rel="stylesheet" href="../src/github-fork.css">
  <style>
    body {
      margin: 0;
      font-family: -apple-system, system, BlinkMacSystemFont,
        "PingFang SC", "Microsoft YaHei", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "Helvetica Neue", sans-serif;
    }

    h1 {
      text-align: center;
      font-weight: normal;
    }

    main {
      margin: 0;
      transition: --gap 0.5s;
      border: var(--border) dashed #555;
      margin-left: auto;
      margin-right: auto;
    }

    /*main:hover {
      --gap: 10px;
      --columns: 3;
    }*/

    .item {
      background-color: #607D8B;
      color: #fff;
      padding: 10px;
      padding-top: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      word-break: break-all;
    }

    .item:nth-of-type(2n+1) {
      background-color: #cd86a9;
    }

    img {
      display: block;
      max-width: 100%;
    }

    /* 支持 Media Queries */
    @media screen and (max-width: 901px) {
      body main {
        --columns: 3;
        --gap: 30px;
      }
    }

    .item:nth-of-type(2) {
      text-align: center;
      font-size: 20px;
      display: layout(masonry);
      --gap: 10px;
      --columns: 2;
      --column-auto-width: 100px;
      padding: 10px;
    }

    .sub-item {
      background-color: #cd86a9;
    }
  </style>
</head>

<body>
  <h1> <a href="https://drafts.css-houdini.org/css-layout-api/" target="_blank">CSS Houdini</a> 实现自定义瀑布流布局 by 一丝</h1>
  <pre style="font-size: 22px;"><style contenteditable style="display: block;"
  >  :root { --border: 5px; }

    main {
      display: layout(masonry); /* 自定义布局的名称 */
      --gap: 20px; /* 间距 */
      --columns: 3; /* 默认 auto */
      --column-auto-width: 300px;
    }</style></pre>

  <main>
    <div class="item">1
      <img src="//wx4.sinaimg.cn/mw1024/90f78f62ly1ffwv0ghbzyj20qo188dm1.jpg" intrinsicsize="960x1592" alt=""
        lazyload="on">
    </div>
    <div class="item">
      <div class="sub-item">1<img src="//wx2.sinaimg.cn/orj360/90f78f62ly1fq3grm5bk7j21sg2dsx6u.jpg"
          intrinsicsize="360x479" alt="" lazyload="on"></div>
      <div class="sub-item">2<img src="//wx2.sinaimg.cn/orj360/90f78f62ly1fq4aqhacgsj20qo0xn12k.jpg"
          intrinsicsize="360x454" alt="" lazyload="on"></div>
      <div class="sub-item">3<img src="//wx4.sinaimg.cn/mw690/90f78f62ly1fmwpqb6gqjj20qo0zkq8v.jpg"
          intrinsicsize="690x920" alt="" lazyload="on"></div>
      <div class="sub-item">4<img src="//wx1.sinaimg.cn/mw690/90f78f62ly1fn75g1vkedj20qo140ae4.jpg"
          intrinsicsize="690x1035" alt="" lazyload="on"></div>
    </div>
    <div class="item">2
      <img src="//wx1.sinaimg.cn/mw690/90f78f62ly1fm60m27b2gj21410qo7d0.jpg" intrinsicsize="690x460" alt=""
        lazyload="on">
    </div>
    <div class="item">3
      <img src="//wx2.sinaimg.cn/mw690/90f78f62ly1fon2gpm5xfj20qo141jwq.jpg" intrinsicsize="690x1036" alt=""
        lazyload="on">
    </div>
    <div class="item">4
      <img src="//wx2.sinaimg.cn/mw690/90f78f62ly1fmls4xf4w2j21400qoafa.jpg" intrinsicsize="690x460" alt=""
        lazyload="on">
    </div>
    <div class="item">5
      <img src="//wx1.sinaimg.cn/mw690/90f78f62ly1fm3c63rpq9j20a00dwjsp.jpg" alt="" lazyload="on">
    </div>
    <div class="item">6
      <img src="//wx3.sinaimg.cn/mw690/90f78f62ly1flvw2e37xhj20qo0zkgpt.jpg" alt="" lazyload="on">
    </div>
    <div class="item">7
      <img src="//wx1.sinaimg.cn/mw690/90f78f62ly1fm60m27b2gj21410qo7d0.jpg" intrinsicsize="690x460" alt=""
        lazyload="on">
    </div>
    <div class="item">8
      <img src="//wx1.sinaimg.cn/mw690/90f78f62ly1fljwv84geqj20qu0qokjl.jpg" alt="" lazyload="on">
    </div>
    <div class="item">9
      <img src="//wx3.sinaimg.cn/mw690/90f78f62ly1fkd2l7e6mlj20qo0zktfr.jpg" alt="" lazyload="on">
    </div>
  </main>
  <div class="github-fork-ribbon-wrapper right">
    <div class="github-fork-ribbon">
      <a target="_blank" href="https://github.com/yisibl/houdini-demo">Fork me on GitHub</a>
    </div>
  </div>
  <script>
    if (location.protocol === 'http:' && location.hostname !== 'localhost')
      location.protocol = 'https:';

    if ('layoutWorklet' in CSS) {
      // 可以通过 URL.createObjectURL 实现内联 JS
      CSS.layoutWorklet.addModule('index.js');
    } else {
      document.body.innerHTML = '您的浏览器暂时不支持 <a href="https://drafts.css-houdini.org/css-layout-api/">CSS Layout API</a>，请升级到最新的 Chrome Canary 并开启：chrome://flags/#enable-experimental-web-platform-features';
    }

    // 使自定义属性支持动画
    if ('registerProperty' in CSS) {
      CSS.registerProperty({
        name: '--gap',
        syntax: '<length>',
        initialValue: '0px',
        inherits: false,
      });

      CSS.registerProperty({
        name: '--column-auto-width',
        syntax: '<length>',
        initialValue: '0px',
        inherits: false,
      });

      CSS.registerProperty({
        name: '--columns',
        syntax: '*',
        initialValue: 'auto',
        inherits: false,
      });
    }
  </script>
</body>

</html>
